@use './font';
@use './theme';
@use './element';

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: 'WorkSans';
}

.title {
  @apply text-xl font-bold text-[#2c4de0] mb-[10px] bg-[rgba(44,77,224,0.2)] rounded-[10px] px-[10px] py-[5px] w-fit flex items-center;
}
.my_content {
  @apply mt-4 border border-solid border-[var(--border-color)] rounded-[10px] p-[10px];
}
.my_file {
  @apply mt-4 bg-[#f9f6f6] rounded-[10px] p-[10px] bg-[rgba(44,77,224,1)] text-white flex justify-between items-center;
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}
